<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>应急广播标准适配器</title>
    <link rel="stylesheet" th:href="@{../../layui/css/layui.css}"/>

    <script type="text/javascript" th:src="@{../../layui/layui.js}"></script>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-body">
        <table id="myTable" class="layui-hide"></table>
    </div>
</div>

<div id="dialog" style="display: none;">
    <form class="layui-form" id="myForm" action="">
        <div class="layui-form-item center" style="display: none;">
            <label class="layui-form-label" style="width: 100px">ID</label>
            <div class="layui-input-block">
                <input type="text" name="id" id="id" value="" placeholder="请输入配置名称" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">参数代码</label>
            <div class="layui-input-block">
                <input type="text" name="code" id="code" required style="width: 240px" lay-verify="required"
                       placeholder="请输入参数代码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">参数值</label>
            <div class="layui-input-block">
                <input type="text" name="value" id="value" required style="width: 240px" lay-verify="required"
                       placeholder="请输入参数值" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">参数描述</label>
            <div class="layui-input-block">
                <input type="text" name="note" id="note" required style="width: 240px" lay-verify="required"
                       placeholder="请输入参数描述" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</div>

<script type="text/html" id="power-toolbar">
    <button class="layui-btn layui-bg-green" lay-event="add">添加配置</button>
    <button class="layui-btn layui-bg-red" lay-event="factoryReset">恢复默认配置</button>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-xs" lay-event="remove">删除</a>
</script>
<script>
    layui.use(['table', 'form', 'jquery'], function () {
        let table = layui.table;
        let $ = layui.jquery;
        let form = layui.form;

        let cols = [
            [
                {
                    title: 'ID',
                    field: 'id',
                    align: 'center'
                },
                {
                    title: '参数代码',
                    field: 'code',
                    align: 'center'
                },
                {
                    title: '参数值',
                    field: 'value',
                    align: 'center'
                },
                {
                    title: '参数说明',
                    field: 'note',
                    align: 'center'
                },
                {
                    title: '操作',
                    toolbar: '#barDemo',
                    width: '15%'
                }
            ]
        ]

        let mytable = table.render({
            elem: '#myTable',
            url: '/systemParam/listData',
            page: true,
            cols: cols,
            skin: 'line',
            toolbar: '#power-toolbar',
            defaultToolbar: [],
            cellMinWidth: 'auto',
            done: function (res, curr, count) {
            },
            response: {
                statusName: 'code',//规定数据状态的字段名称，默认：code
                statusCode: 200, //规定成功的状态码，默认：0
                msgName: 'msg', //规定状态信息的字段名称，默认：msg
                countName: 'count', //规定数据总数的字段名称，默认：count
                dataName: 'data' //规定数据列表的字段名称，默认：data
            }
        });

        function clearForm() {
            $('#myForm')[0].reset();
            form.render();
        }

        table.on('toolbar(myTable)', function (obj) {
            if (obj.event === 'factoryReset') {
                layer.confirm("确认要恢复默认参数设置?", {title: "恢复设置确认"}, function (index) {
                    $.ajax({
                        url: '/systemParam/factoryReset',
                        type: 'get',
                        contentType: 'application/json;charset=UTF-8',
                        success: function (data) {
                            if (data.code === 200) {
                                layer.msg(data.msg, {icon: 1});
                            } else {
                                layer.msg(data.msg, {icon: 2});
                            }
                        },
                        error: function () {
                            layer.msg("操作失败", {icon: 2});
                        }
                    });
                });
            } else if (obj.event === 'add') {
                clearForm();
                let closeLayer = layer.open({
                    type: 1,
                    title: "新增配置",
                    closeBtn: false,
                    shift: 2,
                    area: ['400px', '300px'],
                    shadeClose: true,
                    btn: ['添加', '取消'],
                    // btnAlign: 'c',
                    content: $("#dialog"),
                    success: function (layero, index) {
                    },
                    yes: function (layero, index) {
                        const d = {};
                        const t = $('#myForm').serializeArray();
                        $.each(t, function () {
                            d[this.name] = this.value;
                        });
                        $.ajax({
                            url: '/systemParam/add',
                            type: 'POST',
                            data: JSON.stringify(d),
                            contentType: 'application/json;charset=UTF-8',
                            success: function (data) {
                                if (data.code === 200) {
                                    layer.msg(data.msg, {icon: 1});
                                    mytable.reload();
                                    layer.close(closeLayer);
                                } else {
                                    layer.msg(data.msg, {icon: 2});
                                    mytable.reload();
                                }

                            },
                            error: function () {
                            }
                        });
                    }
                });
            }
        });

        table.on('tool(myTable)', function (obj) {
            const data = obj.data;
            switch (obj.event) {
                case 'edit':
                    clearForm();
                    let closeLayer = layer.open({
                        type: 1,
                        title: "修改参数",
                        closeBtn: false,
                        shift: 2,
                        area: ['400px', '300px'],
                        shadeClose: true,
                        btn: ['确定', '取消'],
                        // btnAlign: 'c',
                        content: $("#dialog"),
                        success: function (layero, index) {
                            $('#id').val(data.id);
                            $('#code').val(data.code);
                            $('#value').val(data.value);
                            $('#note').val(data.note);
                        },
                        yes: function (layero, index) {
                            const d = {};
                            const t = $('#myForm').serializeArray();
                            $.each(t, function () {
                                d[this.name] = this.value;
                            });
                            $.ajax({
                                url: '/systemParam',
                                type: 'PUT',
                                data: JSON.stringify(d),
                                contentType: 'application/json;charset=UTF-8',
                                success: function (data) {
                                    if (data.code === 200) {
                                        layer.msg(data.msg, {icon: 1});
                                        mytable.reload();
                                        layer.close(closeLayer);
                                    } else {
                                        layer.msg(data.msg, {icon: 2});
                                        mytable.reload();
                                    }
                                },
                                error: function () {
                                }
                            });
                        }
                    });
                    break;
                case 'remove':
                    layer.confirm("确认要删除吗，删除后不能恢复", {title: "删除确认"}, function (index) {
                        $.ajax({
                            url: '/systemParam/' + data.id,
                            type: 'delete',
                            contentType: 'application/json;charset=UTF-8',
                            success: function (data) {
                                if (data.code === 200) {
                                    layer.msg(data.msg, {icon: 1});
                                    mytable.reload();
                                } else {
                                    layer.msg(data.msg, {icon: 2});
                                    mytable.reload();
                                }
                            },
                            error: function () {
                            }
                        });
                    });
                    break;
            }
        });


    })

</script>
</body>

</html>
